<template>

    <div class="page">


        <div class="header">
            <router-link to="/search" class="search-box">
                <div>
                    <span class="iconfont icon-sousuo"></span>
                </div>
            </router-link>
			  <router-link to="/publish" >
            <div class="publish" > 发布</div>
			 </router-link>
        </div>

        <div class="nav">
            <ul v-if="cate_list.length > 0">
                <li @click="changeCateIndex(index)" v-for="(item, index) in cate_list"
                    :class="{ active: index === activeIndex }">{{ item.name }}</li>

            </ul>

        </div>
<hr>


        <div class="article_list" ref="article_ref">

 
		
		<div class="item" v-for="item in articleList">
		
		    <!--  第一套样式 -->
		    <div v-if="item.poster_type == 1" class="style1"  @click="navTo('/article?article_id='+item._id)">
		
		        <div class="left">
		            <p>{{ item.title }}</p>
		            <div>
		                <span>{{ item.author }}</span>
		                <span>10分钟前</span>
		                <span>{{ item.comment }}评论</span>
		            </div>
		        </div>
		
		        <div class="img"  >
		
		            <van-image  lazy-load :src="img+'?imageMogr2/thumbnail/!75p'" v-for="img in item.imageSrc">
		                <template v-slot:error>加载失败</template>
		            </van-image>
		
		        </div>
		
		    </div>
		
		    <!--  第2套样式 -->
		    <div v-if="item.poster_type == 0" class="style2"  
			@click="navTo('/article?article_id='+item._id)">
		
		        <div class="left">
		            <p>{{ item.title }}</p>
		            <div>
		                <span>{{ item.author }}</span>
		                <span>10分钟前</span>
		                <span>{{ item.comment }}评论</span>
		            </div>
		        </div>
		
		    </div>
		    <!--  第3套样式 -->
		    <div v-if="item.poster_type == 2||item.poster_type == 3||item.poster_type == 4" class="style3" 
			 @click="navTo('/article?article_id='+item._id)">
		
		        <div class="img"  >
		
		            <van-image   lazy-load :src="img+'?imageMogr2/thumbnail/!75p'" v-for="img in item.imageSrc">
		                <template v-slot:error>加载失败</template>
		            </van-image>
		
		        </div>
		        <div class="left">
		            <p>{{ item.title }}</p>
		            <div>
		                <span>{{ item.author }}</span>
		                <span>10分钟前</span>
		                <span>{{ item.comment }}评论</span>
		            </div>
		        </div>
		
		    </div>
		
		
		
		
		</div>
		
	
<div v-show="status==='loading'" class="statusBox">
	
	loading-------------
</div>
<div v-show="status==='nomore'" class="statusBox">
	
	没有更多了
</div>

        </div>


    </div>


</template>
<script setup>
import { ref, computed,toRefs, onMounted, watch, nextTick } from 'vue';
// import { imgError } from '@/utils'
import cateModule from './cate'
import articleModule from './article'

import {onBeforeRouteLeave,useRouter} from 'vue-router'
let { cate_list, activeIndex, changeCateIndex } = cateModule();

const active_cate_id = computed(function () {
    return cate_list.value[activeIndex.value]
})
let article_ref = ref(null)
let innerHeight = ref(0)
let status = ref('more');  //
  const router= useRouter()

let { skip,
    limit,
    articleList,get_article } = articleModule(active_cate_id,status);
	
	
	// function navTo(url){
		
	// 	router.push(url)
	// }

	// 需要记录滚动到哪 存起来 
	// 下次再出现时取出来
	
	// onMounted(function(){
	// 	article_ref.value.scrollTo({
	// 		   top: 300 ,
	// 		   behavior: "smooth"
	// 	})
	// })
	// 当离开此页面时触发
	onBeforeRouteLeave(function(to,from,next){
		let top  = window.scrollY;
		sessionStorage.setItem('home_top',top)
		next()
	})


//  loading  加载中  。。。
//  more  有数据    
// onmore 全部加载完毕 



onMounted(function(){
	
	
	// window.
	
	// setTimeout(v=>{
		
	// 	console.log(article_ref.value.scrollHeight)
	// },1500)
	
	watch(computed(()=>articleList.value.length),function(n){
		 console.log(n)
		nextTick(function(){
			console.log(article_ref.value.scrollHeight)
			innerHeight.value = article_ref.value.scrollHeight
		})
		
	});
	
	
	
	window.onscroll = function(){
		let top = document.documentElement.scrollTop;
		
		if(status.value==='loading'||status.value==='onmore'){
			
			return 
		}
		
		if(top>=innerHeight.value-window.innerHeight-100 && status.value==='more'){
			
			console.log('快到底了')
			// 调用新数据
			status.value='loading'
			skip.value +=10
			get_article(active_cate_id.value._id)
		}
	}
	
	
})




</script>
<script>
export default {
	name:"home"
}	
</script>

<style scoped>
.page {
/*    display: flex;
    flex-direction: column; */
    /* height: 100%; */
}

.header {
    background: linear-gradient(90deg, #8C5D3E 0%, #504249 100%);
    height: 40px;
    display: flex;
    padding: 0 15px;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;


}

.header .search-box {

    height: 32px;
    display: flex;
    flex: 1;
    align-items: center;
    border-radius: 32px;
    background: #FFFFFF8C;
    box-shadow: inset 0px -4px 4px 0px #0000003F;

}

.nav {
    width: 100%;
    overflow: hidden;
    height: 34px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
     position: fixed;
    width: 100%;
    top: 40px;
    left: 0;
    z-index: 999;

    & ul {
        list-style: none;
        display: flex;
        overflow-x: scroll;
    }

    & li {
        position: relative;
        padding: 0 15px;
        display: flex;
        align-items: center;
        white-space: nowrap;

    }

    & li.active {

        color: var(--baseColor);
    }

    & li:after {
        display: none;
        position: absolute;
        content: "";
        bottom: 0;
        left: 20px;
        right: 20px;
        height: 1px;
        background-color: var(--baseColor);

    }

    & li.active:after {

        display: block;
    }

}

.article_list {

    padding-bottom: 38px;
    flex: 1;
    overflow: scroll;
}

.article_list .item {
    padding: 10px;
}

.style1 {

    width: 100%;
    display: flex;

    .left {
        flex: 1;
    }

    .img {
        width: 124px;
        height: 84px;
        margin-left: 15px;
    }

    .img img {
        width: 124px;
        height: 84px;

    }
}
.statusBox{
	height: 50px;
	background-color: red;
	display: flex;
	align-items: center;
}
</style>